<template>
	<view class="page">
		<!-- 导航栏 -->
		<free-nav-bar bgColor="bg-white">
			<free-icon-button slot="right" :icon="'\ue6ed'"></free-icon-button>
		</free-nav-bar>
		<!-- 头像 -->
		<free-list-item :cover="user.avatar ? user.avatar : '/static/images/userpic.png'" 
		:title="nickname" coverSize="120" 
		showRight @click="open('my/userinfo/userinfo')">
			<view class="flex flex-column">
				<text class="font-lg text-dark font-weight-bold">{{ nickname }}</text>
				<text class="text-light-muted font mt-2">账号: {{ user.username }}</text>
			</view>
			<view slot="right">
				<text class="iconfont font-md text-light-muted">&#xe647;</text>
			</view>
		</free-list-item>
		<!-- 分割线 -->
		<free-divider></free-divider>
		<free-list-item title="支付" showRight>
			<text slot="icon" class="iconfont font-lg py-1">&#xe66c;</text>
		</free-list-item>
		<!-- 分割线 -->
		<free-divider></free-divider>
		<free-list-item title="收藏" showRight @click="open('my/fava/fava')">
			<text slot="icon" class="iconfont font-lg py-1">&#xea2d;</text>
		</free-list-item>
		<free-list-item title="相册" showRight @click="open('find/moments/moments?key=moment')">
			<text slot="icon" class="iconfont font-lg py-1">&#xe608;</text>
		</free-list-item>
		<free-list-item title="表情" showRight>
			<text slot="icon" class="iconfont font-lg py-1">&#xe605;</text>
		</free-list-item>
		<!-- 分割线 -->
		<free-divider></free-divider>
		<free-list-item title="设置" showRight @click="open('my/setting/setting')">
			<text slot="icon" class="iconfont font-lg py-1">&#xe612;</text>
		</free-list-item>
	</view>
</template>

<script>
	import freeNavBar from "@/components/free-ui/free-nav-bar"
	import freeIconButton from "@/components/free-ui/free-icon-button.vue"
	import freeListItem from "@/components/free-ui/free-list-item.vue"
	import freeDivider from "@/components/free-ui/free-divider.vue"
	import auth from '@/common/mixin/auth.js'
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				
			}
		},
		mixins: [auth],
		methods: {
			open(path){
				uni.navigateTo({
					url: '/pages/' + path
				});
			},
		},
		computed:{
			...mapState({
				user:state=>state.user.user
			}),
			nickname(){
				return this.user.nickname ? this.user.nickname : this.user.username
			}
		},
		components:{
			freeNavBar,
			freeIconButton,
			freeListItem,
			freeDivider
		}
	}
</script>

<style>

</style>
